import { ChangeEvent, FC, useState } from 'react';
import useGetComponentInfo from '../../../../../hooks/useGetComponentInfo';
import styles from './index.module.scss';
import classNames from 'classnames';
import { Button, Input, message, Space } from 'antd';
import { useDispatch } from 'react-redux';
import {
  changeSelectedId,
  changeComponentTitle,
  changeComponentHidden,
  toggleComponentLocked,
  moveComponent,
} from '../../../../../store/componentReducer';
import { EyeInvisibleOutlined, LockOutlined } from '@ant-design/icons';
import SortableContainer from '../../../../../components/DragSortable/SortableContainer';
import SortableItem from '../../../../../components/DragSortable/SortableItem';

const ComponentLayer: FC = () => {
  const { componentList, selectedId } = useGetComponentInfo();
  const dispatch = useDispatch();
  const [changeTitleId, setChangeTitleId] = useState('');
  function handleTitleClick(fe_id: string) {
    const currentComponent = componentList.find((c) => c.fe_id === fe_id);
    if (currentComponent && currentComponent.isHidden) {
      message.info('不能选中隐藏的组件');
      return;
    }
    if (fe_id !== selectedId) {
      dispatch(changeSelectedId(fe_id));
      setChangeTitleId('');
      return;
    }
    setChangeTitleId(fe_id);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const newTitle = event.target.value.trim();
    if (!newTitle) return;
    if (!selectedId) return;
    console.log('change title', newTitle);
    dispatch(changeComponentTitle(newTitle));
  }

  function changeHidden(fe_id: string, isHidden: boolean) {
    dispatch(changeComponentHidden({ fe_id, isHidden }));
  }

  function changeLocked(fe_id: string) {
    if (fe_id !== selectedId) {
      dispatch(changeSelectedId(fe_id));
      setChangeTitleId('');
      return;
    }
    dispatch(toggleComponentLocked());
  }
  function handleDragEnd(oldIndex: number, newIndex: number) {
    dispatch(moveComponent({ oldIndex, newIndex }));
  }
  return (
    <SortableContainer
      items={componentList.map((c) => ({ ...c, id: c.fe_id }))}
      onDragEnd={handleDragEnd}
    >
      {componentList.map((component) => {
        const { fe_id, title, isHidden, isLocked } = component;
        const titleDefaultClassName = styles.title;
        const selectedClassName = styles.selected;
        const titleClassName = classNames({
          [titleDefaultClassName]: true,
          [selectedClassName]: fe_id === selectedId,
        });
        return (
          <SortableItem key={fe_id} id={fe_id}>
            <div className={styles.wrapper} onClick={() => handleTitleClick(fe_id)}>
              <div className={titleClassName}>
                {fe_id === changeTitleId && (
                  <Input
                    value={title}
                    onChange={handleChange}
                    onPressEnter={() => setChangeTitleId('')}
                    onBlur={() => setChangeTitleId('')}
                  />
                )}
                {fe_id !== changeTitleId && title}
              </div>
              <div className={styles.handler}>
                <Space>
                  <Button
                    size="small"
                    shape="circle"
                    className={!isHidden ? styles.btn : ''}
                    icon={<EyeInvisibleOutlined />}
                    type={isHidden ? 'primary' : 'text'}
                    onClick={(event) => {
                      event.stopPropagation();
                      changeHidden(fe_id, !isHidden);
                    }}
                  />
                  <Button
                    className={!isLocked ? styles.btn : ''}
                    size="small"
                    shape="circle"
                    icon={<LockOutlined />}
                    onClick={(event) => {
                      event.stopPropagation();
                      changeLocked(fe_id);
                    }}
                    type={isLocked ? 'primary' : 'text'}
                  />
                </Space>
              </div>
            </div>
          </SortableItem>
        );
      })}
    </SortableContainer>
  );
};
export default ComponentLayer;
